<template>
	<view class="settlement u-skeleton">
		<u-navbar title="结算" :background="{
			'backgroundColor':'#fff'
		}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="local u-skeleton-rect">
			<view class="tips">配送信息</view>
			<view class="context" @click="$util.redirectTo('/pages/my/address')">
				<view class="txt">{{address ? address.province + address.city + address.district + '-' + address.detail : address_tips}}</view>
				<u-icon name="arrow-right" color="#999999" size="26" style="margin-top: 4rpx;"></u-icon>
			</view>
		</view>
		<view class="goods-content u-skeleton-rect">
			<image :src="$util.img(goodsPay.image)" mode="widthFix"></image>
			<view class="right">
				<view class="r-top">
					{{goodsPay.name}}
				</view>
				<view class="r-price">
					￥{{goodsPay.total_price}}
				</view>
			</view>
		</view>
		<view class="bottom u-skeleton-rect">
			<view class="item">
				<view class="right">商品金额</view>
				<view class="left">￥{{goodsPay.total_price}}</view>
			</view>
		</view>
		<u-button class="btn-primary u-skeleton-rect" @click="createOrder" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">结算</u-button>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF" ></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 数据加载
				loding:true,
				//商品数据
				goodsPay:{},
				//添加配送地址
				address_tips:'添加配送地址',
				// 地址数据
				address:null,
				//需要的数据
				option:{}
			}
		},
		onLoad(option) {
			this.option = option;
			
		},
		onShow() {
			this.settlementInfo(this.option);
		},
		methods:{
			//前往支付页面
			createOrder(){
				if(!this.address){
					this.$util.taost({title:'请选择地址'})
					return false;
				}
				this.$http.asyncSendrequest({
					url:'/order/createOrder',
					data:{
						id:this.goodsPay.id,
						type:2,
						add_id:this.address.id,
						num:this.goodsPay.num,
						price:this.goodsPay.total_price
					},
					success:res=>{
						if(res.code == '0'){
							uni.setStorageSync('goodsPay',this.goodsPay.total_price)
							this.$util.taost({
								title:res.msg,
								callback:v=>{
									this.$util.redirectTo('/pages/order/cashier',{id:res.data},'redirectTo');
								}
							})
						} else {
							uni.showModal({
								title:'',
								content:res.msg,
								showCancel:true,
								success:v=>{
									if(v.confirm){
										if(res.msg.includes('实名')){
											this.$util.redirectTo('/pages/my/authentication');
										} else if(res.msg.includes('订单')) {
											this.$util.redirectTo('/pages/order/order');
										}
									}
								}
							})
						}
					}
				})
			},
			//获取订单创建需要的信息
			settlementInfo(option){
				let obj = {
					goods_id:option.id,
					num:option.pay_num,
					type:2
				};
				this.$http.asyncSendrequest({
					url:'/order/buyHandle',
					data:{
						...obj
					},
					success:res=>{
						if(res.code == '0'){
							this.goodsPay = res.data.goodsInfo;
							this.goodsPay.total_price = res.data.goodsInfo.price;
							this.address = res.data.address;
						}
						this.loding = false;
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.settlement {
		.local {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			height: 90rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx 30rpx 0;

			.tips {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-right: 88rpx;
			}

			.context {
				width: 70%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					width: 80%;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap;  // 默认不换行；

				}
			}
		}

		.goods-content {
			height: 260rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx 30rpx 0;
			padding: 40rpx 34rpx 40rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				width: 180rpx;
				height: 180rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
			}
			.right{
				width: calc(100% - 218rpx);
				height: 180rpx;
				.r-top{
					margin-top: 16rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
				.r-price{
					margin-top: 46rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		
		.bottom{
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx 30rpx 0;
			// height: 160rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				// margin-bottom: 30rpx;
				.right{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.left{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF1515;
				}
				.hover{
					color:#333333;
				}
			}
		}
		.btn-primary {
			height: 96rpx;
			background: #292929;
			border-radius: 10rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			margin-top: 116rpx;
			position: fixed;
			bottom: 20rpx;
			left: 30rpx;
			width: calc(100% - 60rpx);
		}

	}
</style>